<template>
  <div id="spreadRoot" class="bg-2F3843 c-flex-column">
    <div class="c-br20 c-flex-center c-flex-row c-flex-grow1 c-h0 c-p">
      <div @click="clickGoBack" class="c-ww50 c-hh50 c-flex-row c-flex-center c-pa c-p-t24 c-p-l24 c-brp50 c-opacity80 c-bg-black">
        <i class="iconfont c-fc-white c-fs20">&#xe600;</i>
      </div>
      <div id="spreadImg" class="width-420rem c-br20" @touchstart="touchStartImg" @touchmove="touchEndImg" @touchend="touchEndImg">
        <img class="width-420rem c-br20 app-save-img" alt>
      </div>
    </div>
    <footer class="c-bg-white c-bd-t1 c-w100 c-ph24" :class="((chooseIndex===''||chooseIndex!=0)||(chooseIndex==0&&content[0] != null&&(content[0].isHiddenOfficaltemplate==0||!content[0].isHiddenOfficaltemplate))) && type !=3 ?'c-hh180': ((chooseIndex===''||chooseIndex!=0)||(chooseIndex==0&&content[0] != null&&(content[0].isHiddenOfficaltemplate==0||!content[0].isHiddenOfficaltemplate))) && type ==3?'c-hh260':''">
      <p class="c-textAlign-c c-fs20 c-fc-sblack c-mt20 c-mb20">长按上图保存活动海报发送好友</p>
      <div class="c-contexty-hidden c-contextX-scroll c-ws-n" style="overflow:auto" id="scroll" v-if="(chooseIndex===''||chooseIndex!=0)||(chooseIndex==0&&content[0] != null&&(content[0].isHiddenOfficaltemplate==0||!content[0].isHiddenOfficaltemplate))">
        <template v-for="(item,index) in content">
          <div :key="index" @click="clickChangeImg(index)" v-if="item != null&&(((chooseIndex===''||chooseIndex!=0)&&index!=0)||chooseIndex==0)" class="c-p c-ww100 c-mr20 c-inlineblack c-hh100 c-ww100">
            <img class="c-h c-w100 c-br10 img-pe-none" :src="$addXossFilter(item.bgImage)" alt>
            <img v-show="curIndex == index" class="c-pa c-ww32 c-hh32 check img-pe-none" src="../../../assets/check.png" alt>
          </div>
        </template>
      </div>
      <div class="c-flex-row c-justify-center c-mt12" v-if="type==3">
        <div v-if="!isFaShou" class="c-ww144 c-hh44 c-br24 c-fs20 c-flex-center c-flex-row spread_text" @click="handleClickShareOpenModal">推荐语</div>
        <div v-if="shortLink" class="c-ww144 c-hh44 c-br24 c-fs20 c-flex-center c-flex-row spread_text c-ml132" @click="copyShortLink">复制链接</div>
      </div>
    </footer>
    <div class="c-pb200 c-w100 canvasBox c-flex-row" v-if="showContent && content.length > 0">
      <div class="invitation c-mt44 anvasContent" id="canvas0" v-if="content[0] != null">
        <img :src="$addXossFilter(content[0] && content[0].bgImage)" alt class="c-w100 c-h img-pe-none">
        <div v-if="content[0].bgLayer" class="customOne bgLocation">
          <div v-for="(item,index) in content[0].bgLayer" :key="index">
            <div v-if="item.type==3" :style="item" class="c-pa">
              <div class="c-flex-column c-aligni-center">
                <img :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="headerImg120 c-brp50 img-pe-none">
                <p>{{spreadInfo.nickname}}</p>
              </div>
            </div>
            <div v-if="item.type==2" :style="item" class="c-pa c-table">
              <span class="c-tableCell" :style="'vertical-align:'+item.verticalAlign">{{item.name}}</span>
            </div>
            <img v-if="item.type==1" class="c-pa" :src="item.redirect&&item.redirect==3?$addXossFilter(item.redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt :style="item">
          </div>
          <div v-if="companyAuth && companyAuth.enableShowInfo == 1" class="show-companyInfo">{{companyAuth.instruction || '创客匠人技术支持'}}</div>
        </div>
        <div v-if="userType ==1 && qrcodeStyle==1&&!content[0].bgLayer" class="customOne bgLocation">
          <img :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="headerImg120 c-brp50 img-pe-none">
          <div class="mt20" :style="'color:' + wordColor">
            <p class="fs28 h27">{{spreadInfo.nickname}}</p>
            <p class="fs24 mt30 mb102" v-if="isCustom == 1 && content[0].wordType== 1">{{content[0].word}}</p>
            <p class="fs24 mt30 mb102" v-if="isCustom == 1 && content[0].wordType == 2">{{content[0].customWords}}</p>
          </div>
          <img :src="$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 c-pa l70 b100 img-pe-none">
          <div v-if="companyAuth && companyAuth.enableShowInfo == 1" class="show-companyInfo">{{companyAuth.instruction || '创客匠人技术支持'}}</div>
        </div>

        <div v-if="userType ==1 && qrcodeStyle==2&&!content[0].bgLayer" class="customOne bgLocation">
          <img :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="headerImg120 c-brp50 img-pe-none">
          <div class="mt20" :style="'color:' + wordColor">
            <p class="fs28 h27">{{spreadInfo.nickname}}</p>
            <p class="fs24 mt30 mb102" v-if="isCustom == 1 && content[0].wordType== 1">{{content[0].word}}</p>
            <p class="fs24 mt30 mb102" v-if="isCustom == 1 && content[0].wordType == 2">{{content[0].customWords}}</p>
          </div>
          <img :src="$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 c-pa l295 b100 img-pe-none">
          <div v-if="companyAuth && companyAuth.enableShowInfo == 1" class="show-companyInfo">{{companyAuth.instruction || '创客匠人技术支持'}}</div>
        </div>

        <div v-if="userType ==1 && qrcodeStyle==3&&!content[0].bgLayer" class="customOne bgLocation">
          <img :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="headerImg120 c-brp50 img-pe-none">
          <div class="mt20" :style="'color:' + wordColor">
            <p class="fs28 h27">{{spreadInfo.nickname}}</p>
            <p class="fs24 mt30 mb102" v-if="isCustom == 1 && content[0].wordType== 1">{{content[0].word}}</p>
            <p class="fs24 mt30 mb102" v-if="isCustom == 1 && content[0].wordType == 2">{{content[0].customWords}}</p>
          </div>
          <img :src="$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 c-pa r50 b100 img-pe-none">
          <div v-if="companyAuth && companyAuth.enableShowInfo == 1" class="show-companyInfo">{{companyAuth.instruction || '创客匠人技术支持'}}</div>
        </div>

        <div v-if="userType ==2 && qrcodeStyle==1&&!content[0].bgLayer" class="customOne bgLocation">
          <img :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="headerImg120 c-brp50 c-m-0auto img-pe-none">
          <div class="mt20" :style="'color:' + wordColor">
            <p class="fs28 h27 c-textAlign-c">{{spreadInfo.nickname}}</p>
            <p class="fs24 mt30 mb102 c-textAlign-c" v-if="isCustom == 1 && content[0].wordType== 1">{{content[0].word}}</p>
            <p class="fs24 mt30 mb102 c-textAlign-c" v-if="isCustom == 1 && content[0].wordType == 2">{{content[0].customWords}}</p>
          </div>
          <img :src="$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 c-pa l70 b100 img-pe-none">
          <div v-if="companyAuth && companyAuth.enableShowInfo == 1" class="show-companyInfo">{{companyAuth.instruction || '创客匠人技术支持'}}</div>
        </div>

        <div v-if="userType ==2 && qrcodeStyle==2&&!content[0].bgLayer" class="customOne bgLocation">
          <img :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="headerImg120 c-brp50 c-m-0auto img-pe-none">
          <div class="mt20" :style="'color:' + wordColor">
            <p class="fs28 h27 c-textAlign-c">{{spreadInfo.nickname}}</p>
            <p class="fs24 mt30 mb102 c-textAlign-c" v-if="isCustom == 1 && content[0].wordType== 1">{{content[0].word}}</p>
            <p class="fs24 mt30 mb102 c-textAlign-c" v-if="isCustom == 1 && content[0].wordType == 2">{{content[0].customWords}}</p>
          </div>
          <img :src="$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 c-pa l295 b100 img-pe-none">
          <div v-if="companyAuth && companyAuth.enableShowInfo == 1" class="show-companyInfo">{{companyAuth.instruction || '创客匠人技术支持'}}</div>
        </div>

        <div v-if="userType ==2 && qrcodeStyle==3&&!content[0].bgLayer" class="customOne bgLocation">
          <img :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="headerImg120 c-brp50 c-m-0auto img-pe-none">
          <div class="mt20" :style="'color:' + wordColor">
            <p class="fs28 h27 c-textAlign-c">{{spreadInfo.nickname}}</p>
            <p class="fs24 mt30 mb102 c-textAlign-c" v-if="isCustom == 1 && content[0].wordType== 1">{{content[0].word}}</p>
            <p class="fs24 mt30 mb102 c-textAlign-c" v-if="isCustom == 1 && content[0].wordType== 2">{{content[0].customWords}}</p>
          </div>
          <img :src="$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 c-pa r50 b100 img-pe-none">
          <div v-if="companyAuth && companyAuth.enableShowInfo == 1" class="show-companyInfo">{{companyAuth.instruction || '创客匠人技术支持'}}</div>
        </div>

        <div v-if="userType ==3 && qrcodeStyle==1&&!content[0].bgLayer" class="customOne bgLocation">
          <div class="customThree c-pa">
            <img :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="headerImg120 c-brp50 c-pa c-p-t0 c-p-l0 img-pe-none">
            <img :src="$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 img-pe-none">
          </div>
          <div class="customThreeText c-pa mt20" :style="'color:' + wordColor">
            <p class="fs28 h27">{{spreadInfo.nickname}}</p>
            <p class="fs24 mt12" v-if="isCustom == 1 && content[0].wordType== 1">{{content[0].word}}</p>
            <p class="fs24 mt12" v-if="isCustom == 1 && content[0].wordType == 2">{{content[0].customWords}}</p>
          </div>
          <div v-if="companyAuth && companyAuth.enableShowInfo == 1" class="show-companyInfo">{{companyAuth.instruction || '创客匠人技术支持'}}</div>
        </div>
        <div v-if="userType ==3 && qrcodeStyle==2&&!content[0].bgLayer" class="customOne bgLocation">
          <div class="customThree c-pa c-flex-row">
            <img :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="headerImg120 c-brp50 img-pe-none">
            <img :src="$addXossFilter(spreadInfo.qrcodeImg)" alt class="h160 ml120 img-pe-none">
          </div>
          <div class="customThreeText c-pa" :style="'color:' + wordColor">
            <p class="fs28 h27">{{spreadInfo.nickname}}</p>
            <p class="fs24 mt12" v-if="isCustom == 1 && content[0].wordType== 1">{{content[0].word}}</p>
            <p class="fs24 mt12" v-if="isCustom == 1 && content[0].wordType == 2">{{content[0].customWords}}</p>
          </div>
          <div v-if="companyAuth && companyAuth.enableShowInfo == 1" class="show-companyInfo">{{companyAuth.instruction || '创客匠人技术支持'}}</div>
        </div>
        <div v-if="userType ==3 && qrcodeStyle==3&&!content[0].bgLayer" class="customOne bgLocation">
          <div class="customThree c-pa w650">
            <img :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="headerImg120 c-brp50 c-pa c-p-t0 c-p-l0 img-pe-none">
            <img :src="$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 ml490 img-pe-none">
          </div>
          <div class="customThreeText c-pa" :style="'color:' + wordColor">
            <p class="fs28 h27">{{spreadInfo.nickname}}</p>
            <p class="fs24 mt12" v-if="isCustom == 1 && content[0].wordType== 1">{{content[0].word}}</p>
            <p class="fs24 mt12" v-if="isCustom == 1 && content[0].wordType == 2">{{content[0].customWords}}</p>
          </div>
          <div v-if="companyAuth && companyAuth.enableShowInfo == 1" class="show-companyInfo">{{companyAuth.instruction || '创客匠人技术支持'}}</div>
        </div>

        <div v-if="userType ==-1 && qrcodeStyle==1&&!content[0].bgLayer" class="customOne bgLocation">
          <img :src="$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 c-pa l70 b100 img-pe-none">
          <div class="mt120" :style="'color:' + wordColor">
            <p class="fs24 mt12 c-textAlign-c" v-if="isCustom == 1 && content[0].wordType== 1">{{content[0].word}}</p>
            <p class="fs24 mt12 c-textAlign-c" v-if="isCustom == 1 && content[0].wordType == 2">{{content[0].customWords}}</p>
          </div>
          <div v-if="companyAuth && companyAuth.enableShowInfo == 1" class="show-companyInfo c-bg-sgray">{{companyAuth.instruction || '创客匠人技术支持'}}</div>
        </div>

        <div v-if="userType ==-1 && qrcodeStyle==2&&!content[0].bgLayer" class="customOne bgLocation">
          <img :src="$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 c-pa l295 b100 img-pe-none">
          <div class="mt120" :style="'color:' + wordColor">
            <p class="fs24 mt12 c-textAlign-c" v-if="isCustom == 1 && content[0].wordType== 1">{{content[0].word}}</p>
            <p class="fs24 mt12 c-textAlign-c" v-if="isCustom == 1 && content[0].wordType == 2">{{content[0].customWords}}</p>
          </div>
          <div v-if="companyAuth && companyAuth.enableShowInfo == 1" class="show-companyInfo">{{companyAuth.instruction || '创客匠人技术支持'}}</div>
        </div>

        <div v-if="userType ==-1 && qrcodeStyle==3&&!content[0].bgLayer" class="customOne bgLocation">
          <img :src="$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 c-pa r50 b100 img-pe-none">
          <div class="mt120" :style="'color:' + wordColor">
            <p class="fs24 mt12 c-textAlign-c" v-if="isCustom == 1 && content[0].wordType== 1">{{content[0].word}}</p>
            <p class="fs24 mt12 c-textAlign-c" v-if="isCustom == 1 && content[0].wordType == 2">{{content[0].customWords}}</p>
          </div>
          <div v-if="companyAuth && companyAuth.enableShowInfo == 1" class="show-companyInfo">{{companyAuth.instruction || '创客匠人技术支持'}}</div>
        </div>
      </div>

      <div class="invitation c-mt44 anvasContent" id="canvas1" v-if="content[4] != null && type != 6">
        <img :src="$addXossFilter(content[4].bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="canvasOne bgLocation">
          <div class="c-m-0auto">
            <!-- 上半部分 -->
            <div>
              <div :class="content[4].userStyle == 1 ? '':'pt50'" class="c-textAlign-c c-flex-column c-aligni-center">
                <div class="c-flex-row c-aligni-center">
                  <img v-if="content[4].userStyle == 1" :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="c-brp50 headerImg img-pe-none b4 mr25">
                  <div v-if="content[4].userStyle == 1" class="fs24 mt10 c-fc-xblack">{{spreadInfo.nickname}}</div>
                </div>
                <div v-if="isCustom == 0" class="fs32 mt34 fc-poster-pink c-fstyle-i">“{{content[4].word}}”</div>
                <div v-if="isCustom == 1 && content[4].wordType == 1" class="fs32 mt34 fc-poster-pink c-fstyle-i">“{{content[4].word}}”</div>
                <div v-if="isCustom == 1 && content[4].wordType == 2" class="fs32 mt34 fc-poster-pink c-fstyle-i">“{{content[4].customWords}}”</div>
              </div>
              <div class="c-flex-column c-aligni-center pt50">
                <div class="h200 br10 mr25 c-textAlign-c">
                  <vip-custom-img :cover="spreadInfo.cover" :imgClass="'h200 img-pe-none br10'" :hasText="false" :equalParentWidth="false" v-if="spreadInfo.cover && (spreadInfo.cover.coverType ==1 || spreadInfo.cover.coverType ==2)" />
                  <img v-else-if="spreadInfo.cover" :src="spreadInfo.cover" alt="" class="h200 img-pe-none br10" />
                  <img v-else-if="vipType == 2" src="https://ckjr-static-assets.oss-cn-shanghai.aliyuncs.com/assets/img/vip.3a94308.png" alt="" class="h200 img-pe-none br10" />
                  <img v-else-if="vipType == 4" src="https://ckjr-static-assets.oss-cn-shanghai.aliyuncs.com/assets/img/svip.png" alt="" class="h200 img-pe-none br10" />
                  <img v-else :src="$addXossFilter(spreadInfo.cover, require('@/assets/defult270.png'))" alt class="h200 img-pe-none br10">
                </div>
                <div class="c-flex-column c-aligni-center">
                  <div class="fs28 c-fc-xblack c-text-hidden c-textAlign-c ww430 mt20 mb20">{{spreadInfo.name}}</div>
                  <div class="c-flex-row c-aligni-center">
                    <div class="c-flex-row c-aligni-center">
                      <img v-if="type == 3" class="w73" src="../../../assets/i/wap/poster/captain_price1.png" alt="">
                      <div class="fc-poster-pink fs24 mr25 c-flex-row c-aligni-end"><span class="fs42 lh32 fw500">{{spreadInfo.activityPrice}}</span> 元{{spreadInfo.captainPriceType == 2 ? `起`:''}}</div>
                    </div>
                    <div class="fs24 c-fc-gray c-p">原价:{{spreadInfo.price}}元</div>
                  </div>
                  <div class="ww430 br25 h50 bg-pink c-textAlign-c c-fc-white fs24 mt20">活动时间：{{(spreadInfo.startAt).replace(/-/g,'.')}}-{{(spreadInfo.endAt).replace(/-/g,'.')}}</div>
                </div>
              </div>
            </div>
            <!-- 下半部分二维码 -->
            <div class="c-flex-column c-aligni-center c-justify-sb ph25 qr-info b170">
              <div class="fc-poster-pink fs28 mb20 w507 c-textAlign-c">来自「{{spreadInfo.from}}」</div>
              <img :src="content[4].redirect&&content[4].redirect==3?$addXossFilter(content[4].redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg180 img-pe-none">
            </div>
          </div>
          <div v-if="companyAuth && companyAuth.enableShowInfo == 1" class="show-companyInfo c-fc-xblack">{{companyAuth.instruction || '创客匠人技术支持'}}</div>
        </div>
      </div>
      <div class="invitation c-mt44 anvasContent" id="canvas1" v-if="content[4] != null && type == 6">
        <img :src="$addXossFilter(content[4].bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="canvasOne-dpg bgLocation">
          <div class="c-m-0auto">
            <!-- 上半部分 -->
            <div v-if="content[4].userStyle == 1 && type == 6" class="c-flex-row c-aligni-center c-translucent-balck20 pl12 pr20 hh72 lh72 c-pa p-t88 c-p-r0 br-l36">
              <img :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="c-brp50 hh60 ww60 img-pe-none mr10">
              <div class="fs28 c-fc-white">{{spreadInfo.nickname}}</div>
            </div>
            <div>
              <div class="c-textAlign-l minh34">
                <div v-if="isCustom == 0" class="fs32 c-fc-white c-fw500 letter-spacing-4px">{{content[4].word}}</div>
                <div v-if="isCustom == 1 && content[4].wordType == 1" class="fs32 c-fc-white c-fw500 letter-spacing-4px">{{content[4].word}}</div>
                <div v-if="isCustom == 1 && content[4].wordType == 2" class="fs32 c-fc-white c-fw500 letter-spacing-4px">{{content[4].customWords}}</div>
              </div>
              <div class="mt120 ph28">
                <div class="hh394 br10 c-textAlign-c c-text-hidden">
                  <vip-custom-img :cover="spreadInfo.cover" :imgClass="'c-w100 c-h img-pe-none br10'" :hasText="false" :equalParentWidth="false" v-if="spreadInfo.cover && (spreadInfo.cover.coverType ==1 || spreadInfo.cover.coverType ==2)" />
                  <img v-else-if="spreadInfo.cover" :src="spreadInfo.cover" alt="" class="c-w100 c-h img-pe-none br10" />
                  <img v-else-if="vipType == 2" src="https://ckjr-static-assets.oss-cn-shanghai.aliyuncs.com/assets/img/vip.3a94308.png" alt="" class="c-w100 c-h img-pe-none br10" />
                  <img v-else-if="vipType == 4" src="https://ckjr-static-assets.oss-cn-shanghai.aliyuncs.com/assets/img/svip.png" alt="" class="c-w100 c-h img-pe-none br10" />
                  <img v-else :src="$addXossFilter(spreadInfo.cover, require('@/assets/defult270.png'))" alt class="c-w100 c-h img-pe-none br10">
                </div>
                <div class="fs32 c-fc-xblack c-text-hidden mt32 pb20">{{spreadInfo.name}}</div>
                <div class="c-flex-row c-aligni-end">
                  <div class="fc-collocation-price fs24 mr25 c-flex-row c-aligni-end"><span class="fs24 lh20">{{'￥' | iosPriceFilter}}</span><span class="fs42 c-lh fw500 pt12">{{spreadInfo.activityPrice}}</span><span v-if="spreadInfo.comboType == 2 && spreadInfo.specType == 2" class="fs24">起</span></div>
                  <!-- <div class="c-flex-row">
                    <div class="c-flex-row c-fc-xmlred c-p">
                      <div class="iconfont fs24">&#xe758;</div>
                      <div class="fs18 ph6">最多可省<span>{{'￥' | iosPriceFilter}}</span>{{Number(16.00).toFixed(2) | moneyStr}}</div>
                      <div class="c-pa c-w100 c-h br4 bd1-xmlred c-pz9"></div>
                    </div>
                  </div> -->
                  <div v-if="Number(spreadInfo.collocationPrice) - Number(spreadInfo.price) > 0" class="c-flex-row c-fc-xmlred c-p c-text-hidden c-lh br4 maxw240 top-10px c-p">
                    <div class="iconfont fs34">&#xe758;</div>
                    <div class="fs22 ph6 c-text-ellipsis1 lh-13">{{spreadInfo.comboType == 1 ? '最多可省' : spreadInfo.specType == 2 ? '最多可省' : '立省'}}<span class="fs22">{{'￥' | iosPriceFilter}}</span>{{Number(spreadInfo.collocationPrice - spreadInfo.price).toFixed(2) | moneyStr}}</div>
                    <div class="c-pa c-w100 c-h br4 bd1-xmlred c-pz9"></div>
                  </div>
                </div>
                <div class="c-fc-gray fs24 mt20">活动时间：{{(spreadInfo.startAt).replace(/-/g,'.')}}<span class="c-ph12">-</span>{{(spreadInfo.endAt).replace(/-/g,'.')}}</div>
              </div>
            </div>
            <div class="c-flex-row c-justify-sb p-b142 c-p-l0 c-pa c-m-0auto c-w100 ph80">
              <img :src="content[4].redirect&&content[4].redirect==3?$addXossFilter(content[4].redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg140 img-pe-none">
              <div class="c-w0 c-flex-grow1 pl20 pv6 c-flex-column c-justify-sb">
                <div class="c-fc-white fs24">来自「{{spreadInfo.from}}」</div>
                <div class="fs20 c-fc-white">扫码了解详情</div>
              </div>
            </div>
          </div>
          <div v-if="companyAuth && companyAuth.enableShowInfo == 1" class="show-companyInfo c-fc-white pb16">{{companyAuth.instruction || '创客匠人技术支持'}}</div>
        </div>
      </div>
      <div class="invitation c-mt44 anvasContent" id="canvas2" v-if="content[5] != null && type != 6">
        <img :src="$addXossFilter(content[5].bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="canvasTwo bgLocation">
          <div class="c-m-0auto">
            <!-- 上半部分 -->
            <div>
              <div class="c-flex-row c-flex-center">
                <img v-if="content[5].userStyle == 1" :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="c-brp50 headerImg1 img-pe-none b4 mr20">
                <div v-if="content[5].userStyle == 1" class="fs24 c-fc-xblack">{{spreadInfo.nickname}}</div>
              </div>
              <div :class="content[5].userStyle == 1 ? '':'pt50'" class="c-textAlign-c c-flex-column c-aligni-center">
                <div v-if="isCustom == 0" class="fs32 fc-poster-red c-fstyle-i">“{{content[5].word}}”</div>
                <div v-if="isCustom == 1 && content[5].wordType == 1" class="fs32 fc-poster-red c-fstyle-i">“{{content[5].word}}”</div>
                <div v-if="isCustom == 1 && content[5].wordType == 2" class="fs32 fc-poster-red c-fstyle-i">“{{content[5].customWords}}”</div>
              </div>
              <div class="c-flex-column c-aligni-center mt50">
                <div class="h200 br10 mr25 c-textAlign-c">
                  <vip-custom-img :cover="spreadInfo.cover" :imgClass="'h200 img-pe-none br10'" :hasText="false" :equalParentWidth="false" v-if="spreadInfo.cover && (spreadInfo.cover.coverType ==1 || spreadInfo.cover.coverType ==2)" />
                  <img v-else-if="spreadInfo.cover" :src="spreadInfo.cover" alt="" class="h200 img-pe-none br10" />
                  <img v-else-if="vipType == 2" src="https://ckjr-static-assets.oss-cn-shanghai.aliyuncs.com/assets/img/vip.3a94308.png" alt="" class="h200 img-pe-none br10" />
                  <img v-else-if="vipType == 4" src="https://ckjr-static-assets.oss-cn-shanghai.aliyuncs.com/assets/img/svip.png" alt="" class="h200 img-pe-none br10" />
                  <img v-else :src="$addXossFilter(spreadInfo.cover, require('@/assets/defult270.png'))" alt class="h200 img-pe-none br10">
                </div>
                <div class="c-flex-column c-aligni-center">
                  <div class="fs28 c-fc-xblack c-text-hidden c-textAlign-c ww430 mt20">{{spreadInfo.name}}</div>
                  <div class="c-flex-row c-aligni-center mt20">
                    <div class="c-flex-row c-aligni-center">
                      <img v-if="type == 3" class="w73" src="../../../assets/i/wap/poster/captain_price2.png" alt="">
                      <span class="fc-poster-red fs24 mr25 c-flex-row c-aligni-end"><span class="fs42 lh32 fw500">{{spreadInfo.activityPrice}}</span>元{{spreadInfo.captainPriceType == 2 ? `起`:''}}</span>
                    </div>
                    <span class="fs24 c-fc-gray">原价：{{spreadInfo.price}}元</span>
                  </div>
                  <div class="c-mt20 ww430 h50 time-bg c-textAlign-c c-fc-white fs24">
                    <div clas="c-textAlign-c c-fc-white fs24">活动时间：{{(spreadInfo.startAt).replace(/-/g,'.')}}-{{(spreadInfo.endAt).replace(/-/g,'.')}}</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 下半部分二维码 -->
            <div class="c-flex-column c-aligni-center c-justify-sb qr-info ph25 b90">
              <div class="fc-poster-red fs30 mb20 w520 c-textAlign-c">来自「{{spreadInfo.from}}」</div>
              <img :src="content[5].redirect&&content[5].redirect==3?$addXossFilter(content[5].redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg180 img-pe-none mb20">
              <div class="">扫码了解活动详情</div>
            </div>
          </div>
          <div v-if="companyAuth && companyAuth.enableShowInfo == 1" class="show-companyInfo c-fc-white">{{companyAuth.instruction || '创客匠人技术支持'}}</div>
        </div>
      </div>
      <div class="invitation c-mt44 anvasContent" id="canvas2" v-if="content[5] != null && type == 6">
        <img :src="$addXossFilter(content[5].bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="canvasTwo-dpg bgLocation">
          <div class="c-m-0auto">
            <!-- 上半部分 -->
            <div v-if="content[5].userStyle == 1 && type == 6" class="c-flex-row c-aligni-center c-translucent-balck20 pl12 pr20 hh72 lh72 c-pa p-t104 c-p-r0 br-l36">
              <img :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="c-brp50 hh60 ww60 img-pe-none mr10">
              <div class="fs28 c-fc-white">{{spreadInfo.nickname}}</div>
            </div>
            <div>
              <div class="c-textAlign-c minh34">
                <div v-if="isCustom == 0" class="fs32 c-fc-3B2E79 letter-spacing-4px">{{content[5].word}}</div>
                <div v-if="isCustom == 1 && content[5].wordType == 1" class="fs32 c-fc-3B2E79 letter-spacing-4px">{{content[5].word}}</div>
                <div v-if="isCustom == 1 && content[5].wordType == 2" class="fs32 c-fc-3B2E79 letter-spacing-4px">{{content[5].customWords}}</div>
              </div>
              <div class="mt30">
                <div class="hh394 br10 c-textAlign-c c-text-hidden">
                  <vip-custom-img :cover="spreadInfo.cover" :imgClass="'c-w100 c-h img-pe-none br10'" :hasText="false" :equalParentWidth="false" v-if="spreadInfo.cover && (spreadInfo.cover.coverType ==1 || spreadInfo.cover.coverType ==2)" />
                  <img v-else-if="spreadInfo.cover" :src="spreadInfo.cover" alt="" class="c-w100 c-h img-pe-none br10" />
                  <img v-else-if="vipType == 2" src="https://ckjr-static-assets.oss-cn-shanghai.aliyuncs.com/assets/img/vip.3a94308.png" alt="" class="c-w100 c-h img-pe-none br10" />
                  <img v-else-if="vipType == 4" src="https://ckjr-static-assets.oss-cn-shanghai.aliyuncs.com/assets/img/svip.png" alt="" class="c-w100 c-h img-pe-none br10" />
                  <img v-else :src="$addXossFilter(spreadInfo.cover, require('@/assets/defult270.png'))" alt class="c-w100 c-h img-pe-none br10">
                </div>
                <div class="fs32 c-fc-xblack c-text-hidden mt32 pb20">{{spreadInfo.name}}</div>
                <div class="c-flex-row c-aligni-end">
                  <div class="fc-collocation-price fs24 mr25 c-flex-row c-aligni-end"><span class="fs24 lh20">{{'￥' | iosPriceFilter}}</span><span class="fs42 c-lh fw500 pt12">{{spreadInfo.activityPrice}}</span><span v-if="spreadInfo.comboType == 2 && spreadInfo.specType == 2" class="fs24">起</span></div>
                  <div v-if="Number(spreadInfo.collocationPrice) - Number(spreadInfo.price) > 0" class="c-flex-row c-fc-xmlred c-p c-text-hidden c-lh br4 maxw240 top-10px c-p">
                    <div class="iconfont fs34">&#xe758;</div>
                    <div class="fs22 ph6 c-text-ellipsis1 lh-13">{{spreadInfo.comboType == 1 ? '最多可省' : spreadInfo.specType == 2 ? '最多可省' : '立省'}}<span class="fs22">{{'￥' | iosPriceFilter}}</span>{{Number(spreadInfo.collocationPrice - spreadInfo.price).toFixed(2) | moneyStr}}</div>
                    <div class="c-pa c-w100 c-h br4 bd1-xmlred c-pz9"></div>
                  </div>
                </div>
                <div class="c-fc-gray fs24 mt20">活动时间：{{(spreadInfo.startAt).replace(/-/g,'.')}}<span class="c-ph12">-</span>{{(spreadInfo.endAt).replace(/-/g,'.')}}</div>
              </div>
            </div>
            <!-- 下半部分二维码 -->
            <div class="c-flex-row c-justify-sb p-b132 c-p-l0 c-pa c-m-0auto c-w100 ph80">
              <img :src="content[5].redirect&&content[5].redirect==3?$addXossFilter(content[5].redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg140 img-pe-none">
              <div class="c-w0 c-flex-grow1 pl20 pv6 c-flex-column c-justify-sb">
                <div class="c-fc-xblack fs24">来自「{{spreadInfo.from}}」</div>
                <div class="fs20 c-fc-xblack">扫码了解详情</div>
              </div>
            </div>
          </div>
          <div v-if="companyAuth && companyAuth.enableShowInfo == 1" class="show-companyInfo c-fc-white">{{companyAuth.instruction || '创客匠人技术支持'}}</div>
        </div>
      </div>
      <div class="invitation c-mt44 anvasContent" id="canvas3" v-if="content[6] != null && type != 6">
        <img :src="$addXossFilter(content[6].bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="canvasThree bgLocation">
          <div :class="content[6].userStyle == 1 ? '':'pt80'" class="c-textAlign-c mt40 c-flex-row c-aligni-center">
            <img v-if="content[6].userStyle == 1" :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="c-brp50 headerImg img-pe-none b4 mr20">
            <div v-if="content[6].userStyle == 1" class="fs24 c-fc-white">{{spreadInfo.nickname}}</div>
          </div>
          <div class="c-m-0auto mt140">
            <!-- 上半部分 -->
            <div class="c-flex-column c-aligni-center">
              <div class="c-textAlign-c">
                <div v-if="isCustom == 0" class="fc-dpink fs30 pl20">“{{content[6].word}}”</div>
                <div v-if="isCustom == 1 && content[6].wordType == 1" class="fc-dpink fs30 pl20">“{{content[6].word}}”</div>
                <div v-if="isCustom == 1 && content[6].wordType == 2" class="fc-dpink fs30 pl20">“{{content[6].customWords}}”</div>
              </div>
              <div class="mt50 c-flex-column c-flex-center">
                <div class="h200 br10 c-textAlign-c">
                  <vip-custom-img :cover="spreadInfo.cover" :imgClass="'h200 img-pe-none br10'" :hasText="false" :equalParentWidth="false" v-if="spreadInfo.cover && (spreadInfo.cover.coverType ==1 || spreadInfo.cover.coverType ==2)" />
                  <img v-else-if="spreadInfo.cover" :src="spreadInfo.cover" alt="" class="h200 img-pe-none br10" />
                  <img v-else-if="vipType == 2" src="https://ckjr-static-assets.oss-cn-shanghai.aliyuncs.com/assets/img/vip.3a94308.png" alt="" class="h200 img-pe-none br10" />
                  <img v-else-if="vipType == 4" src="https://ckjr-static-assets.oss-cn-shanghai.aliyuncs.com/assets/img/svip.png" alt="" class="h200 img-pe-none br10" />
                  <img v-else :src="$addXossFilter(spreadInfo.cover, require('@/assets/defult270.png'))" alt class="h200 img-pe-none br10">
                </div>
                <div class="fs28 c-fc-xblack mt20 c-text-hidden c-textAlign-c ww430">{{spreadInfo.name}}</div>
                <div class="c-flex-row c-aligni-center mt12">
                  <div class="c-flex-row c-aligni-center">
                    <img v-if="type == 3" class="w73" src="../../../assets/i/wap/poster/captain_price3.png" alt="">
                    <span class="fc-dpink fs24 mr25 c-flex-row c-aligni-end"><span class="fs42 lh32 fw500">{{spreadInfo.activityPrice}}</span>元{{spreadInfo.captainPriceType == 2 ? `起`:''}}</span>
                  </div>
                  <span class="fs24 c-fc-gray">原价：{{spreadInfo.price}}元</span>
                </div>
                <div class="ww430 br25 h50 bg-dpink c-textAlign-c c-fc-white fs24 mt12">活动时间：{{(spreadInfo.startAt).replace(/-/g,'.')}}-{{(spreadInfo.endAt).replace(/-/g,'.')}}</div>
              </div>
            </div>
            <!-- 下半部分二维码 -->
            <div class="c-flex-column c-aligni-center c-justify-sb qr-info b100 ph25">
              <div class="fs30 mb20 fc-dpink w520 c-textAlign-c">来自「{{spreadInfo.from}}」</div>
              <img :src="content[6].redirect&&content[6].redirect==3?$addXossFilter(content[6].redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg160 img-pe-none mb20">
              <div class="">扫码了解活动详情</div>
            </div>
          </div>
          <div v-if="companyAuth && companyAuth.enableShowInfo == 1" class="show-companyInfo c-fc-white">{{companyAuth.instruction || '创客匠人技术支持'}}</div>
        </div>
      </div>
      <div class="invitation c-mt44 anvasContent" id="canvas3" v-if="content[6] != null && type == 6">
        <img :src="$addXossFilter(content[6].bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="canvasThree-dpg bgLocation">
          <div class="">
            <!-- 上半部分 -->
            <div v-if="content[6].userStyle == 1 && type == 6" class="c-flex-row c-aligni-center c-translucent-balck20 pl12 pr20 hh72 lh72 c-pa p-t40 c-p-r0 br-l36">
              <img :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="c-brp50 hh60 ww60 img-pe-none mr10">
              <div class="fs28 c-fc-white">{{spreadInfo.nickname}}</div>
            </div>
            <div class="rotate-13">
              <div class="hh346 br10 c-textAlign-c c-text-hidden">
                <vip-custom-img :cover="spreadInfo.cover" :imgClass="'c-w100 c-h img-pe-none br10'" :hasText="false" :equalParentWidth="false" v-if="spreadInfo.cover && (spreadInfo.cover.coverType ==1 || spreadInfo.cover.coverType ==2)" />
                <img v-else-if="spreadInfo.cover" :src="spreadInfo.cover" alt="" class="c-w100 c-h img-pe-none br10" />
                <img v-else-if="vipType == 2" src="https://ckjr-static-assets.oss-cn-shanghai.aliyuncs.com/assets/img/vip.3a94308.png" alt="" class="c-w100 c-h img-pe-none br10" />
                <img v-else-if="vipType == 4" src="https://ckjr-static-assets.oss-cn-shanghai.aliyuncs.com/assets/img/svip.png" alt="" class="c-w100 c-h img-pe-none br10" />
                <img v-else :src="$addXossFilter(spreadInfo.cover, require('@/assets/defult270.png'))" alt class="c-w100 c-h img-pe-none br10">
              </div>
              <div class="fs32 c-fc-xblack c-text-hidden mt22 pb20">{{spreadInfo.name}}</div>
              <div class="c-flex-row c-aligni-end">
                <div class="fc-collocation-price fs24 mr25 c-flex-row c-aligni-end"><span class="fs24 lh20">{{'￥' | iosPriceFilter}}</span><span class="fs42 c-lh fw500 pt12">{{spreadInfo.activityPrice}}</span><span v-if="spreadInfo.comboType == 2 && spreadInfo.specType == 2" class="fs24">起</span></div>
                <div v-if="Number(spreadInfo.collocationPrice) - Number(spreadInfo.price) > 0" class="c-flex-row c-fc-xmlred c-p c-text-hidden c-lh br4 maxw240 top-10px c-p c-bg-white">
                  <div class="iconfont fs34">&#xe758;</div>
                  <div class="fs22 ph6 c-text-ellipsis1 lh-13">{{spreadInfo.comboType == 1 ? '最多可省' : spreadInfo.specType == 2 ? '最多可省' : '立省'}}<span class="fs22">{{'￥' | iosPriceFilter}}</span>{{Number(spreadInfo.collocationPrice - spreadInfo.price).toFixed(2) | moneyStr}}</div>
                  <div class="c-pa c-w100 c-h br4 bd1-xmlred c-pz9"></div>
                </div>
              </div>
              <div class="c-fc-xblack fs24 mt20">活动时间：{{(spreadInfo.startAt).replace(/-/g,'.')}}<span class="c-ph12">-</span>{{(spreadInfo.endAt).replace(/-/g,'.')}}</div>
            </div>
            <!-- 下半部分二维码 -->
            <div class="c-flex-row c-justify-sb p-b34 c-p-l0 c-pa c-m-0auto c-w100 ph28">
              <div class="c-w0 c-flex-grow1 mr30">
                <div v-if="isCustom == 0" class="fs32 c-fc-white letter-spacing-4px c-textAlign-r c-fw600">{{content[6].word}}</div>
                <div v-if="isCustom == 1 && content[6].wordType == 1" class="fs32 c-fc-white letter-spacing-4px c-textAlign-r c-fw600">{{content[6].word}}</div>
                <div v-if="isCustom == 1 && content[6].wordType == 2" class="fs32 c-fc-white letter-spacing-4px c-textAlign-r c-fw600">{{content[6].customWords}}</div>
                <div class="c-fc-white fs24 mt20 c-textAlign-r">来自「{{spreadInfo.from}}」</div>
              </div>
              <div class="c-bg-white br10 c-ph12 pv10">
                <img :src="content[6].redirect&&content[6].redirect==3?$addXossFilter(content[6].redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg140 img-pe-none">
                <div class="fs20 c-fc-gray c-textAlign-c">扫码了解详情</div>
              </div>
            </div>
          </div>
          <div v-if="companyAuth && companyAuth.enableShowInfo == 1" class="show-companyInfo c-fc-white pb25">{{companyAuth.instruction || '创客匠人技术支持'}}</div>
        </div>
      </div>
      <div class="invitation c-mt44 anvasContent" id="canvas4" v-if="content[1] != null">
        <img :src="$addXossFilter(content[1].bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="bgLocation">
          <div class="c-m-0auto">
            <div v-if="content[1].userStyle == 1 && type != 6" class="c-flex-row c-aligni-center c-translucent-balck20 pl12 pr20 hh72 lh72 c-pa p-t32 br-r36">
              <img :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="c-brp50 hh60 ww60 img-pe-none mr10">
              <div class="fs24 mt10 c-fc-white">{{spreadInfo.nickname}}</div>
            </div>
            <div v-if="content[1].userStyle == 1 && type == 6" class="c-flex-row c-aligni-center c-translucent-balck20 pl12 pr20 hh72 lh72 c-pa p-t104 c-p-r0 br-l36">
              <img :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="c-brp50 hh60 ww60 img-pe-none mr10">
              <div class="fs28 c-fc-white">{{spreadInfo.nickname}}</div>
            </div>
            <div class="ph80">
              <div class="mt226 c-fc-FF7662 fs28">
                {{isCustom == 0 || (isCustom == 1 && content[1].wordType == 1) ? content[1].word : (isCustom == 1 && content[1].wordType == 2 ? content[1].customWords : '')}}
              </div>
              <div class="mt30">
                <div class="hh394 br10 c-textAlign-c c-text-hidden">
                  <vip-custom-img :cover="spreadInfo.cover" :imgClass="'c-w100 c-h img-pe-none br10'" :hasText="false" :equalParentWidth="false" v-if="spreadInfo.cover && (spreadInfo.cover.coverType ==1 || spreadInfo.cover.coverType ==2)" />
                  <img v-else-if="spreadInfo.cover" :src="spreadInfo.cover" alt="" class="c-w100 c-h img-pe-none br10" />
                  <img v-else-if="vipType == 2" src="https://ckjr-static-assets.oss-cn-shanghai.aliyuncs.com/assets/img/vip.3a94308.png" alt="" class="c-w100 c-h img-pe-none br10" />
                  <img v-else-if="vipType == 4" src="https://ckjr-static-assets.oss-cn-shanghai.aliyuncs.com/assets/img/svip.png" alt="" class="c-w100 c-h img-pe-none br10" />
                  <img v-else :src="$addXossFilter(spreadInfo.cover, require('@/assets/defult270.png'))" alt class="c-w100 c-h img-pe-none br10">
                </div>
                <div class="fs32 c-fc-xblack c-text-hidden mt22 pb20">{{spreadInfo.name}}</div>
                <div class="c-flex-row" :class="type == 6 ? 'c-aligni-end' : 'c-aligni-center'">
                  <img v-if="type == 3" class="w73" src="../../../assets/i/wap/poster/captain_price1.png" alt="">
                  <div v-if="type != 6" class="c-fc-FF7662 fs24 mr25 c-flex-row c-aligni-end"><span class="fs42 lh32 fw500 mt12">{{spreadInfo.activityPrice}}</span> 元{{spreadInfo.captainPriceType == 2 ? `起`:''}}</div>
                  <div v-if="type != 6" class="fs24 c-fc-gray c-p">原价:{{spreadInfo.price}}元</div>
                  <template v-if="type == 6">
                    <div class="fc-collocation-price fs24 mr25 c-flex-row c-aligni-end"><span class="fs24 lh20">{{'￥' | iosPriceFilter}}</span><span class="fs42 c-lh fw500 pt12">{{spreadInfo.activityPrice}}</span><span v-if="spreadInfo.comboType == 2 && spreadInfo.specType == 2" class="fs24">起</span></div>
                    <div v-if="Number(spreadInfo.collocationPrice) - Number(spreadInfo.price) > 0" class="c-flex-row c-fc-xmlred c-p c-text-hidden c-lh br4 maxw240 top-10px c-p">
                      <div class="iconfont fs34">&#xe758;</div>
                      <div class="fs22 ph6 c-text-ellipsis1 lh-13">{{spreadInfo.comboType == 1 ? '最多可省' : spreadInfo.specType == 2 ? '最多可省' : '立省'}}<span class="fs22">{{'￥' | iosPriceFilter}}</span>{{Number(spreadInfo.collocationPrice - spreadInfo.price).toFixed(2) | moneyStr}}</div>
                      <div class="c-pa c-w100 c-h br4 bd1-xmlred c-pz9"></div>
                    </div>
                  </template>
                </div>
                <div class="c-fc-gray fs24 mt20">活动时间：{{(spreadInfo.startAt).replace(/-/g,'.')}}<span class="c-ph12">-</span>{{(spreadInfo.endAt).replace(/-/g,'.')}}</div>
              </div>
            </div>
            <div class="c-flex-row c-aligni-start c-justify-sb p-b150 c-p-l0 c-pa c-m-0auto c-w100 ph80">
              <div class="c-fc-xblack fs24 c-w0 c-flex-grow1">来自「{{spreadInfo.from}}」</div>
              <div class="ww140">
                <img :src="content[1].redirect&&content[1].redirect==3?$addXossFilter(content[1].redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg140 img-pe-none">
                <div class="fs20 c-fc-gray c-textAlign-c c-mt14">扫码了解详情</div>
              </div>
            </div>
          </div>
          <div v-if="companyAuth && companyAuth.enableShowInfo == 1" class="show-companyInfo b30 c-fc-FF7662">{{companyAuth.instruction || '创客匠人技术支持'}}</div>
        </div>
      </div>
      <div class="invitation c-mt44 anvasContent" id="canvas5" v-if="content[2] != null">
        <img :src="$addXossFilter(content[2].bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="bgLocation">
          <div class="c-m-0auto">
            <div v-if="content[2].userStyle == 1 && type != 6" class="c-flex-row c-aligni-center c-translucent-balck20 pl12 pr20 hh72 lh72 c-pa p-t54 c-p-r0 br-l36">
              <img :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="c-brp50 hh60 ww60 img-pe-none mr10">
              <div class="fs24 mt10 c-fc-white">{{spreadInfo.nickname}}</div>
            </div>
            <div v-if="content[2].userStyle == 1 && type == 6" class="c-flex-row c-aligni-center c-translucent-balck20 pl12 pr20 hh72 lh72 c-pa p-t88 c-p-r0 br-l36">
              <img :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="c-brp50 hh60 ww60 img-pe-none mr10">
              <div class="fs28 c-fc-white">{{spreadInfo.nickname}}</div>
            </div>
            <div class="pl100 pr28">
              <div class="mt194 c-fc-white fs32">
                {{isCustom == 0 || (isCustom == 1 && content[2].wordType == 1) ? content[2].word : (isCustom == 1 && content[2].wordType == 2 ? content[2].customWords : '')}}
              </div>
              <div class="mt80 pl30">
                <div class="hh394 br10 c-textAlign-c c-text-hidden">
                  <vip-custom-img :cover="spreadInfo.cover" :imgClass="'c-w100 c-h img-pe-none br10'" :hasText="false" :equalParentWidth="false" v-if="spreadInfo.cover && (spreadInfo.cover.coverType ==1 || spreadInfo.cover.coverType ==2)" />
                  <img v-else-if="spreadInfo.cover" :src="spreadInfo.cover" alt="" class="c-w100 c-h img-pe-none br10" />
                  <img v-else-if="vipType == 2" src="https://ckjr-static-assets.oss-cn-shanghai.aliyuncs.com/assets/img/vip.3a94308.png" alt="" class="c-w100 c-h img-pe-none br10" />
                  <img v-else-if="vipType == 4" src="https://ckjr-static-assets.oss-cn-shanghai.aliyuncs.com/assets/img/svip.png" alt="" class="c-w100 c-h img-pe-none br10" />
                  <img v-else :src="$addXossFilter(spreadInfo.cover, require('@/assets/defult270.png'))" alt class="c-w100 c-h img-pe-none br10">
                </div>
                <div class="fs32 c-fc-xblack c-text-hidden mt22 pb20">{{spreadInfo.name}}</div>
                <div class="c-flex-row" :class="type == 6 ? 'c-aligni-end' : 'c-aligni-center'">
                  <img v-if="type == 3" class="w73" src="../../../assets/i/wap/poster/captain_price1.png" alt="">
                  <div v-if="type != 6" class="c-fc-FF7662 fs24 mr25 c-flex-row c-aligni-end"><span class="fs42 lh32 fw500">{{spreadInfo.activityPrice}}</span> 元{{spreadInfo.captainPriceType == 2 ? `起`:''}}</div>
                  <div v-if="type != 6" class="fs24 c-fc-gray c-p">原价:{{spreadInfo.price}}元</div>
                  <template v-if="type == 6">
                    <div class="fc-collocation-price fs24 mr25 c-flex-row c-aligni-end"><span class="fs24 lh20">{{'￥' | iosPriceFilter}}</span><span class="fs42 c-lh fw500 pt12">{{spreadInfo.activityPrice}}</span><span v-if="spreadInfo.comboType == 2 && spreadInfo.specType == 2" class="fs24">起</span></div>
                    <div v-if="Number(spreadInfo.collocationPrice) - Number(spreadInfo.price) > 0" class="c-flex-row c-fc-xmlred c-p c-text-hidden c-lh br4 maxw240 top-10px c-p">
                      <div class="iconfont fs34">&#xe758;</div>
                      <div class="fs22 ph6 c-text-ellipsis1 lh-13">{{spreadInfo.comboType == 1 ? '最多可省' : spreadInfo.specType == 2 ? '最多可省' : '立省'}}<span class="fs22">{{'￥' | iosPriceFilter}}</span>{{Number(spreadInfo.collocationPrice - spreadInfo.price).toFixed(2) | moneyStr}}</div>
                      <div class="c-pa c-w100 c-h br4 bd1-xmlred c-pz9"></div>
                    </div>
                  </template>
                </div>
                <div class="c-fc-gray fs24 mt20 pb25">活动时间：{{(spreadInfo.startAt).replace(/-/g,'.')}}<span class="c-ph12">-</span>{{(spreadInfo.endAt).replace(/-/g,'.')}}</div>
              </div>
              <div class="pl30 pr12">
                <div class="c-flex-row c-aligni-start c-justify-sb bd-t-97 pt25">
                  <div class="c-fc-xblack fs24 c-w0 c-flex-grow1">来自「{{spreadInfo.from}}」</div>
                  <div class="ww140">
                    <img :src="content[2].redirect&&content[2].redirect==3?$addXossFilter(content[2].redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg140 img-pe-none">
                    <div class="fs20 c-fc-gray c-textAlign-c c-mt14">扫码了解详情</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="companyAuth && companyAuth.enableShowInfo == 1" class="show-companyInfo b30 c-fc-white">{{companyAuth.instruction || '创客匠人技术支持'}}</div>
        </div>
      </div>
      <div class="invitation c-mt44 anvasContent" id="canvas6" v-if="content[3] != null">
        <img :src="$addXossFilter(content[3].bgImage)" alt class="c-w100 c-h img-pe-none">
        <div class="bgLocation">
          <div class="c-m-0auto">
            <div v-if="content[3].userStyle == 1 && type != 6" class="c-flex-row c-aligni-center c-translucent-balck20 pl12 pr20 hh72 lh72 c-pa p-t32 br-r36">
              <img :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="c-brp50 hh60 ww60 img-pe-none mr10">
              <div class="fs24 mt10 c-fc-white">{{spreadInfo.nickname}}</div>
            </div>
            <div v-if="content[3].userStyle == 1 && type == 6" class="c-flex-row c-aligni-center c-translucent-balck20 pl12 pr20 hh72 lh72 c-pa p-t88 c-p-r0 br-l36">
              <img :src="$addXossFilter(spreadInfo.headimgurl, require('@/assets/defult_head.png'))" alt class="c-brp50 hh60 ww60 img-pe-none mr10">
              <div class="fs28 c-fc-white">{{spreadInfo.nickname}}</div>
            </div>
            <div class="ph80">
              <div class="mt420 rotate">
                <div class="hh394 br10 c-textAlign-c c-text-hidden">
                  <vip-custom-img :cover="spreadInfo.cover" :imgClass="'c-w100 c-h img-pe-none br10'" :hasText="false" :equalParentWidth="false" v-if="spreadInfo.cover && (spreadInfo.cover.coverType ==1 || spreadInfo.cover.coverType ==2)" />
                  <img v-else-if="spreadInfo.cover" :src="spreadInfo.cover" alt="" class="c-w100 c-h img-pe-none br10" />
                  <img v-else-if="vipType == 2" src="https://ckjr-static-assets.oss-cn-shanghai.aliyuncs.com/assets/img/vip.3a94308.png" alt="" class="c-w100 c-h img-pe-none br10" />
                  <img v-else-if="vipType == 4" src="https://ckjr-static-assets.oss-cn-shanghai.aliyuncs.com/assets/img/svip.png" alt="" class="c-w100 c-h img-pe-none br10" />
                  <img v-else :src="$addXossFilter(spreadInfo.cover, require('@/assets/defult270.png'))" alt class="c-w100 c-h img-pe-none br10">
                </div>
                <div class="fs32 c-fc-xblack c-text-hidden mt22 pb20">{{spreadInfo.name}}</div>
                <div class="c-flex-row" :class="type == 6 ? 'c-aligni-end' : 'c-aligni-center'">
                  <img v-if="type == 3" class="w73" src="../../../assets/i/wap/poster/captain_price1.png" alt="">
                  <div v-if="type != 6" class="c-fc-FF7662 fs24 mr25 c-flex-row c-aligni-end"><span class="fs42 lh32 fw500">{{spreadInfo.activityPrice}}</span> 元{{spreadInfo.captainPriceType == 2 ? `起`:''}}</div>
                  <div v-if="type != 6" class="fs24 c-fc-gray c-p">原价:{{spreadInfo.price}}元</div>
                  <template v-if="type == 6">
                    <div class="fc-collocation-price fs24 mr25 c-flex-row c-aligni-end"><span class="fs24 lh20">{{'￥' | iosPriceFilter}}</span><span class="fs42 c-lh fw500 pt12">{{spreadInfo.activityPrice}}</span><span v-if="spreadInfo.comboType == 2 && spreadInfo.specType == 2" class="fs24">起</span></div>
                    <div v-if="Number(spreadInfo.collocationPrice) - Number(spreadInfo.price) > 0" class="c-flex-row c-fc-xmlred c-p c-text-hidden c-lh br4 maxw240 top-10px c-p">
                      <div class="iconfont fs34">&#xe758;</div>
                      <div class="fs22 ph6 c-text-ellipsis1 lh-13">{{spreadInfo.comboType == 1 ? '最多可省' : spreadInfo.specType == 2 ? '最多可省' : '立省'}}<span class="fs22">{{'￥' | iosPriceFilter}}</span>{{Number(spreadInfo.collocationPrice - spreadInfo.price).toFixed(2) | moneyStr}}</div>
                      <div class="c-pa c-w100 c-h br4 bd1-xmlred c-pz9"></div>
                    </div>
                  </template>
                </div>
                <div class="c-fc-gray fs24 mt20">活动时间：{{(spreadInfo.startAt).replace(/-/g,'.')}}<span class="c-ph12">-</span>{{(spreadInfo.endAt).replace(/-/g,'.')}}</div>
              </div>
            </div>
            <div class="c-flex-row c-aligni-start c-justify-sb mt90 c-pa c-w100 c-p-l0 ph80 p-b50">
              <div class="ww160 br12 c-bg-white pt12">
                <img :src="content[3].redirect&&content[3].redirect==3?$addXossFilter(content[3].redirectImage):$addXossFilter(spreadInfo.qrcodeImg)" alt class="qrcodeImg132 img-pe-none c-mlr-auto">
                <div class="fs20 c-fc-gray c-textAlign-c pt2 pb12 lh20">扫码了解详情</div>
              </div>
              <div class="c-flex-column c-aligni-start c-flex-grow1 c-w0 pl30">
                <div class="c-fc-white fs28 c-fw-b">
                  {{isCustom == 0 || (isCustom == 1 && content[3].wordType == 1) ? content[3].word : (isCustom == 1 && content[3].wordType == 2 ? content[3].customWords : '')}}
                </div>
                <div class="c-fc-white fs24 mt12">来自「{{spreadInfo.from}}」</div>
              </div>
            </div>
            <div v-if="companyAuth && companyAuth.enableShowInfo == 1" class="show-companyInfo b30 c-fc-white mt32">{{companyAuth.instruction || '创客匠人技术支持'}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="masker img-pe-none" v-if="isShowMasker"></div>
    <share-masker :isShowShare="isShowShare" v-if="isShowShare" @closeShare="isShowShare=false;"></share-masker>

    <!-- 底部弹窗--推荐语 -->
    <open-modal :openModal="showOpenModal" @closeModal="closeModal" :isShowText="true" :text="'分享给好友或者发布朋友圈时附上精美文案更有吸引力'">
      <div class="c-bg-white c-br-tl20 c-br-tr20 c-text-hidden c-hh760">
        <div class="c-p">
          <div class="c-w100 c-flex-row c-flex-center c-fs28 c-hh100 c-fc-xblack c-fw600">选择推荐语</div>
          <i @click="closeModal" class="iconfont c-pa c-p-t30 c-p-r24 c-fc-gray c-fs32">&#xe84e;</i>
        </div>
        <div class="c-p">
          <div class="c-w100 c-bg-white c-hh660 c-contexty-scroll c-scroll-touch c-pb88" id="scrollContent" @scroll="scrollContent($event)">
            <div class="c-w100 c-ph24">
              <div class="c-w100 c-fs24 c-fc-sblack c-br16 c-pv20 c-ph24" @click="handleClickSelect(item, index)" :class="[index == shareList.length - 1?'':'c-mb20', index == selectIndex ?'theme-bg-10 theme-bd1':'bg-f2']" v-for="(item, index) in shareList" :key="index">{{item.word}}</div>
              <loading-status-tem :dataStatus="dataStatus" noDataText="暂无内容"></loading-status-tem>
            </div>
          </div>
          <div class="c-ph30 c-pv12 c-bg-white c-flex-row c-flex-center c-pa c-w100 c-p-b0 c-p-l0 copy_shadow" @click="handleClickCopy()">
            <div class="c-w100 c-hh64 c-flex-row c-flex-center c-fs22 c-fw600 c-fc-white c-br32 theme-bg">一键复制</div>
          </div>
        </div>
      </div>
    </open-modal>
  </div>
</template>

<script>
// import { html2canvas } from '@/utils/html2canvas.js'
import ShareMasker from "@/components/templates/common/shareMasker.vue";
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
import { utilJs } from "@/utils/common.js";
import { getUrlDetail } from "@/utils/goDetails.js";
import OpenModal from "@/components/templates/common/openModal.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { reportPageShareSuccess } from "@/utils/userTraceLog.js";
let bgList = [];
let extId = "";
let proId = "";
let distribution = '';
let html2canvas = null;
let shareImage = null;
let indexMap = {
  0: 0,
  1: 4,
  2: 5,
  3: 6,
  4: 1,
  5: 2,
  6: 3
}
const LIMIT = 10;
let pageIndex = 1;
export default {
  name: "SpreadSocail",
  components: {
    ShareMasker,
    VipCustomImg,
    OpenModal,
    loadingStatusTem
  },
  data() {
    return {
      showShareKnow: false,
      showContent: true,
      spreadInfo: {},
      spreadImgList: [],
      curIndex: 0,
      ckFrom: "",
      cId: 0,
      qrcodeStyle: "",
      userType: "",
      type: 1,
      isCustom: "",
      content: [],
      wordColor: "",
      isShowShare: false,
      default: "",
      chooseIndex:'',
      isShowMasker: false,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      posterType: "",
      copyTtex: '',
      dataStatus: 'HAS_MORE_DATA',
      shareList: [],
      shortLink: '',
      showOpenModal: false,
      isFaShou: localStorage.getItem("isFaShou") == 1,
      selectIndex: 0,
      prodMapType: global.prodMapType,
    };
  },
  watch: {
    showOpenModal(val) {
      if (val) {
        pageIndex = 1
        this.getShareWordList()
      }
    }
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    touchStartImg() {
      clearTimeout(this._touchTimeCon);
      this._touchTimeCon = setTimeout(() => {
        reportPageShareSuccess(this._shareUrl);
      }, 250);
    },
    touchEndImg() {
      clearTimeout(this._touchTimeCon );
      this._touchTimeCon = null;
    },
    // 获取分享文案
    getShareWordList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      // let cmpId = this.cmpId == '' ? extId : this.cmpId;
      // let prodId = this.ckFrom == global.ckFrom.course ? this.cId : (this.ckFrom == global.ckFrom.vip || this.ckFrom == global.ckFrom.svip) ? cmpId : extId;
      utilJs.getMethod(global.apiurl + `common/getShareWordList?page=${pageIndex}&limit=${LIMIT}&prodType=${this.ckFrom}&prodId=${proId}&usageType=${this.type}`, res => {
        console.log(res)
        if (pageIndex == 1) {
          this.shareList = res.data || [];
          this.shareList.forEach((element, index) => {
            if (this.selectIndex == index) {
              this.copyTtex = element.word
            }
          });
        } else {
          this.shareList = [...this.shareList, ...res.data]
        }
        if (res.data && (res.data.length < LIMIT)) {
          this.dataStatus = pageIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA'
        } else {
          this.dataStatus = 'HAS_MORE_DATA'
          pageIndex++
        }
      })
    },
    // 滚动
    scrollContent() {
      let element = document.getElementById('scrollContent');
      utilJs.elementLoading(element, () => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.shareList.length > 0) {
          this.getShareWordList();
        }
      })
    },
    // 选中
    handleClickSelect(item, index) {
      if (index == this.selectIndex) return;
      this.selectIndex = index;
      this.copyTtex = item.word;
    },
    closeModal() {
      this.showOpenModal = false;
    },
    // 一键复制
    handleClickCopy() {
      utilJs.copyText(this.copyTtex);
    },
    // 推荐语
    handleClickShareOpenModal() {
      this.showOpenModal = true;
    },
    // 复制链接
    copyShortLink() {
      if (!this.shortLink)
        return;
      let copyContent = `${this.spreadInfo.nickname}邀请你学习${this.prodMapType[this.ckFrom]}【${this.spreadInfo.shareTitle}】，点击进入查看${this.shortLink}`
      utilJs.copyText(copyContent);
      reportPageShareSuccess(this._shareUrl);
    },
    clickGoBack() {
      this.$router.go(-1);
    },
    clickChangeImg(index) {
      this.isShowMasker = true;
      this.showContent = true;
      document.querySelector("#spreadImg img").setAttribute("src", this.$addXossFilter(this.content[index].bgImage));
      let hasSpreadArr = this.spreadImgList.filter(item => item.index == index);
      this.curIndex = index;
      if (hasSpreadArr.length > 0) {
        document.querySelector("#spreadImg img").setAttribute("src", this.$addXossFilter(hasSpreadArr[0].src));
        this.isShowMasker = false;
        this.showContent = false;
        return;
      }
      this.$loading.show({
        text: "活动海报生成中"
      });
      document.ontouchstart = null;
      document.ontuchmove = null;
      document.ontouchend = null;
      this.$nextTick(() => {
        this.canvas(index);
      });
    },
    canvas(index) {
      let domTest = document.getElementById("canvas" + indexMap[index]);
      if (!domTest) {
        return;
      }
      html2canvas(domTest, {
        useCORS: true,
        height: domTest.offsetHeight, // 解决当前页面生成图片出现白边问题
        width: domTest.offsetWidth,
        }).then(canvas => {// eslint-disable-line
          let ctx = canvas.getContext("2d");
          // this.underline(ctx, `原价：${this.spreadInfo.price}元`, 900, 1500, 100, "red", "1px", 10);
          this.canvasToImage(ctx);
        });
    },
    // 获取活动海报
    getPosterInfo() {
      let getUrl = `${global.apiurl}common/getEventPoster?extId=${this.cId}&usageType=${this.type}&ckFrom=${this.ckFrom}`
      if (this.$route.query.shareholderId) { //股东分享，要带股东id
        getUrl += `&shareholderId=${this.$route.query.shareholderId}`
      }
      if (sessionStorage.getItem('promotedAccountId')) {
        getUrl += `&promotedAccountId=${sessionStorage.getItem('promotedAccountId')}`
      }
      utilJs.getMethod(getUrl, res => {
        this.shortLink = res.linkUrl;
        let coverImg = this.$addXossFilter(res.cover);
        shareImage = this.$addXossFilter(res.shareImg)
        this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
        this.spreadInfo = {
          name: res.name.substr(0, 30),
          price: res.price,
          activityPrice: res.activityPrice,
          shareTitle: res.campaignName,
          shareDesc: res.shareDesc,
          captainPriceType: res.captainPriceType,
          headimgurl:
            this.$addXossFilter(res.avatar) || require("../../../assets/defult_head.png"),
          nickname: res.nickname,
          cover: coverImg,
          from: localStorage.getItem("companyName"),
          qrcodeImg:
            "data:image/svg+xml;base64," +
            window.btoa(unescape(encodeURIComponent(res.qrcodeUrl))),
          startAt: res.startAt,
          endAt: res.endAt,
        };
        if (this.type == 6) {
          this.spreadInfo.collocationPrice = res.collocationPrice;
          this.spreadInfo.comboType = res.comboType;
          this.spreadInfo.specType = res.specType;
          this.spreadInfo.collocationPrice = res.collocationPrice;
        }
        this.wechatShare();
        if (res.custom.data.bgs) { // 只有固定海报
          bgList[0] = null;
          for (let i = 4; i < 7; i++) {
            let contentItem = {
              bgType: "1",
              bgImage: this.$addXossFilter(res.custom.data.bgs[i]),
              wordType: "1",
              customWords: "",
              wordId: "5",
              word: res.custom.data.words[0].content
            };
            bgList.push(contentItem);
          }
          for (let i = 1; i < 4; i++) {
            let contentItem = {
              bgType: "1",
              bgImage: this.$addXossFilter(this.type == 6 ? res.custom.data.bgs[i + 6] : res.custom.data.bgs[i]),
              wordType: "1",
              customWords: "",
              wordId: "5",
              word: res.custom.data.words[0].content
            };
            bgList.push(contentItem);
          }
          this.content = bgList.slice(0, 2);
          this.clickChangeImg(1);
          this.isCustom = res.custom.isCustom;
        } else { // 包含自定义海报
          bgList = res.custom.data.content;
          let newBgList = [];
          if (this.type == 6) {
            newBgList = [...res.custom.data.content.slice(4, 7), ...res.custom.data.content.slice(7, 10)]; // 根据ui需求将后面三个得海报移到固定海报得前三个
          } else {
            newBgList = [...res.custom.data.content.slice(4, 7), ...res.custom.data.content.slice(1, 4)]; // 根据ui需求将后面三个得海报移到固定海报得前三个
          }
          newBgList.unshift(bgList[0])
          bgList = newBgList;
          let defaultIndex = 0;
          if (this.type == 6 && res.custom.data.default > 6) {
            defaultIndex = res.custom.data.default - 6;
          } else {
            defaultIndex = res.custom.data.default;
          }
          this.default = indexMap[defaultIndex];
          this.chooseIndex = this.default;
          this.userType =
            res.custom.data.content[0] != null &&
            res.custom.data.content[0].userType;
          this.qrcodeStyle =
            res.custom.data.content[0] != null &&
            res.custom.data.content[0].qrcodeStyle;
          this.isCustom = res.custom.isCustom;
          this.wordColor = res.custom.data.content[0].wordColor;
          this.content = bgList;
          if (this.default == 0) {
            if (res.custom.data.content[0].bgLayer) {
              for (let i = 0; i < res.custom.data.content[0].bgLayer.length; i++) {
                res.custom.data.content[0].bgLayer[i].height = res.custom.data.content[0].bgLayer[i].height * 3 + 'px'
                res.custom.data.content[0].bgLayer[i].width = res.custom.data.content[0].bgLayer[i].width * 3 + 'px'
                res.custom.data.content[0].bgLayer[i].lineHeight = res.custom.data.content[0].bgLayer[i].lineHeight * 3 + 'px'
                res.custom.data.content[0].bgLayer[i].left = res.custom.data.content[0].bgLayer[i].posX * 3 + 'px'
                res.custom.data.content[0].bgLayer[i].top = res.custom.data.content[0].bgLayer[i].posY * 3 + 'px'
                res.custom.data.content[0].bgLayer[i].fontSize = res.custom.data.content[0].bgLayer[i].size * 3 + 'px'
                res.custom.data.content[0].bgLayer[i].letterSpacing = res.custom.data.content[0].bgLayer[i].letterSpacing * 3 + 'px'
              }
            }
            this.clickChangeImg(0);
          } else if (this.default > 0) {
            this.clickChangeImg(this.default);
          }
        }
      }
      );
    },
    canvasToImage(ctx) {
      try {
        let dataURL = ctx.canvas.toDataURL("image/png?x-oss-process=style/common");
        document.querySelector("#spreadImg").innerHTML = '';
        document.querySelector("#spreadImg").innerHTML = '<img src="' + dataURL + '" class="app-save-img width-420rem c-br20" alt>'
        let spreadItem = {
          index: this.curIndex,
          src: dataURL
        };
        this.spreadImgList.push(spreadItem);
        document.ontouchstart = true;
        document.ontuchmove = true;
        document.ontouchend = true;
        if (this.content.length == 2) {
          this.content = bgList;
        }
        setTimeout(() => {
          this.$loading.hide();
          this.showContent = false;
          this.isShowMasker = false;
        }, 1000);
      } catch (err) {
        this.$loading.hide();
        console.log(err.message);
        console.log(err.stack);
      }
    },
    //分享
    wechatShare: function () {
      let title =
        this.spreadInfo.shareTitle || window.localStorage.getItem("shareTitle");
      if (this.type == 2) {
        title = '【限时抢购】' + title;
      }
      if (this.type == 3) {
        title = '【邀您一起拼团】' + title;
      }
      if (this.type == 4) {
        title = '【快来帮我灌溉吧】' + title;
      }
      if (this.type == 5) {
        title = '【邀您一起砍价】' + title;
      }
      let shareImg = "";
      if (this.spreadInfo.cover && this.spreadInfo.cover.coverType) {
        shareImg = shareImage ? shareImage : this.spreadInfo.cover.coverType == 1 ? (window.location.protocol + '//' + window.location.hostname + '/static/i/wap/vip/vip-bg-mb' + this.spreadInfo.cover.coverUrl + '.png') : this.spreadInfo.cover.coverUrl;
      } else {
        shareImg = shareImage ? shareImage : (this.spreadInfo.cover || window.localStorage.getItem("shareLogo"));
      }
      let shareUrl = window.location.href.split("#")[0];
      let query = {
        ckFrom: this.ckFrom,
        refereeId: localStorage.getItem("userId")
      }
      if ((this.ckFrom == global.ckFrom.edu || this.ckFrom == global.ckFrom.eduInviteCard) && localStorage.getItem("shareholderId")) { //面授课的股东推广
        query.shareholderId = localStorage.getItem("shareholderId");
      }
      if (this.ckFrom == global.ckFrom.column) {
        query.distribution = distribution;
        query.cId = proId;
      }
      if (this.ckFrom == global.ckFrom.vip || this.ckFrom == global.ckFrom.svip) {
        if (this.isCollage == true) {
          query.isCollage = true;
        } else if (this.isSales == true) {
          query.isSales = true;
        } else if (this.isFa == true) {
          query.isFa = true;
        }
      }
      if (this.$route.query.shareholderId) { //面授课的股东推广
        query.shareholderId = this.$route.query.shareholderId;
      }
      shareUrl += '#' + getUrlDetail(this.ckFrom, proId, query, extId)
      this._shareUrl = shareUrl;
      let shareDesc = this.spreadInfo.shareDesc || "查看详情";
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, () => {
      });
    },
    //手机端分享
    appShare: function () {
      let title =
        this.spreadInfo.shareTitle || window.localStorage.getItem("shareTitle");
      let shareImg = "";
      if (this.spreadInfo.cover && this.spreadInfo.cover.coverType) {
        shareImg = this.spreadInfo.shareImg ? this.spreadInfo.shareImg : this.spreadInfo.cover.coverType == 1 ? (window.location.protocol + '//' + window.location.hostname + '/static/i/wap/vip/vip-bg-mb' + this.spreadInfo.cover.coverUrl + '.png') : this.spreadInfo.cover.coverUrl;
      } else {
        shareImg = this.spreadInfo.shareImg ? this.spreadInfo.shareImg : this.spreadInfo.cover || window.localStorage.getItem("shareLogo");
      }
      let shareUrl = window.location.href.split("#")[0];
      let query = {
        ckFrom: this.ckFrom,
        refereeId: localStorage.getItem("userId")
      }
      if ((this.ckFrom == global.ckFrom.edu || this.ckFrom == global.ckFrom.eduInviteCard) && localStorage.getItem("shareholderId")) { //面授课的股东推广
        query.shareholderId = localStorage.getItem("shareholderId");
      }
      if (this.ckFrom == global.ckFrom.column) {
        query.distribution = distribution;
        query.cId = proId;
      }
      if (this.ckFrom == global.ckFrom.vip || this.ckFrom == global.ckFrom.svip) {
        if (this.isCollage == true) {
          query.isCollage = true;
        } else if (this.isSales == true) {
          query.isSales = true;
        } else if (this.isFa == true) {
          query.isFa = true;
        }
      }
      if (this.$route.query.shareholderId) { //面授课的股东推广
        query.shareholderId = this.$route.query.shareholderId;
      }
      shareUrl += '#' + getUrlDetail(this.ckFrom, proId, query, extId)
      let shareDesc = this.spreadInfo.shareDesc || "查看详情";
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
  },
  mounted() {
    //如果是ios,则去掉minHeight设置，防止底部前进后退导航挡住页面
    if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
      document.getElementById("spreadRoot").style.minHeight = "";
      document.getElementById("spreadRoot").style.height = "100%";
    }
    bgList = [];
    this.spreadInfo = null;
    this.posterType = "";
    document.querySelector("#spreadImg img").setAttribute("src", "");
    this.content = [];
    extId = this.$route.query.extId;
    proId = this.$route.query.proId;
    distribution = this.$route.query.distribution || '';
    this.cId = this.$route.query.cId;
    this.ckFrom = this.$route.query.ckFrom;
    this.type = this.$route.query.type;
    this.vipType = this.$route.query.vipType;
    this.isSales = this.$route.query.isSales;
    this.isFa = this.$route.query.isFa;
    this.isCollage = this.$route.query.isCollage;
    this.default = null;
    this.chooseIndex = null;
    import(/* webpackChunkName: "html2canvas" */"@/utils/html2canvas.js").then(res => {
      html2canvas = res.default;
      this.getPosterInfo();
    })
  },
  beforeDestroy() {
    this.$loading.hide();
  },
  deactivated() { }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.width-420rem {
  width: 10.5rem;
}
.invitation {
  background-repeat: no-repeat;
  width: 66%;
  background-size: contain;
  height: 88%;
}
.canvasBox {
  width: 6800px;
  height: 1334px;
  top: -9999px;
  left: -3000px;
  z-index: -999;
  position: absolute;
}
.anvasContent {
  width: 750px;
  height: 1334px;
  position: relative;
}
.canvasOne {
  padding-top: 240px;
}
.canvasOne-dpg {
  padding-top: 190px;
  padding-left: 54px;
  padding-right: 54px;
}
.letter-spacing-4px {
  letter-spacing: 4px
}
.minh34 {
  min-height: 34px;
}
.canvasTwo {
  padding-top: 300px;
  padding-left: 50px;
  padding-right: 50px;
}
.canvasTwo-dpg {
  padding-top: 284px;
  padding-left: 80px;
  padding-right: 80px;
}
.canvasThree {
  padding-left: 50px;
  padding-top: 100px;
  padding-right: 50px;
}
.canvasThree-dpg {
  padding-left: 130px;
  padding-top: 290px;
  padding-right: 130px;
}
.fc-orange {
  color: #ff632d;
}
.fc-poster-pink {
  color: #fc6882;
}
.fc-poster-red {
  color: #be363a;
}
.fc-dpink {
  color: #db4c51;
}
.fc-collocation-price {
  color: #FF3636;
}
.bg-orange {
  background-color: #ff632d;
}
.bg-pink {
  background-color: #fc6882;
}
.bg-dpink {
  background-color: #db4c51;
}
.bg-blue {
  background-color: #7390fe;
}
.pl20 {
  padding-left: 20px;
}
.ph6 {
  padding-left: 6px;
  padding-right: 6px;
}
.ph12 {
  padding-left: 12px;
  padding-right: 12px;
}
.ph28 {
  padding-left: 28px;
  padding-right: 28px;
}
.ph80 {
  padding-left: 80px;
  padding-right: 80px;
}
.pv3 {
  padding-top: 3px;
  padding-bottom: 3px;
}
.pv6 {
  padding-top: 6px;
  padding-bottom: 6px;
}
.pv10 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.ph25 {
  padding-left: 25px;
  padding-right: 25px;
}
.ml120 {
  margin-left: 120px;
}
.pt2 {
  padding-top: 2px;
}
.pt10 {
  padding-top: 10px;
}
.pb12 {
  padding-bottom: 12px;
}
.pt50 {
  padding-top: 50px;
}
.pt80 {
  padding-top: 80px;
}
.pb16 {
  padding-bottom: 16px;
}
.br4 {
  border-radius: 4px;
}
.br10 {
  border-radius: 10px;
}
.br20 {
  border-radius: 20px;
}
.br25 {
  border-radius: 25px;
}
.w64 {
  width: 64px;
}
.w73 {
  width: 73px;
}
.w50 {
  width: 50%;
}
.w100 {
  width: 100%;
}
.w180 {
  width: 180px;
}
.w430 {
  width: 430px;
}
.w507 {
  width: 507px;
}
.w520 {
  width: 520px;
}
.w650 {
  width: 650px;
}
.ww140 {
  width: 140px;
}
.ww160 {
  width: 160px;
}
.ww72 {
  width: 72px;
}
.ww60 {
  width: 60px;
}
.h10 {
  height: 10px;
}
.h12 {
  height: 12px;
}
.h50 {
  height: 50px;
  line-height: 50px;
}
.h27 {
  height: 27px;
  line-height: 27px;
}
.h16 {
  height: 16px;
}
.h120 {
  height: 120px;
}
.h160 {
  height: 160px;
}
.h100 {
  height: 100%;
}
.h160 {
  height: 160px;
}
.h200 {
  height: 200px;
}
.hh72 {
  height: 72px;
}
.hh60 {
  height: 60px;
}
.hh40 {
  height: 40px;
}
.lh20 {
  line-height: 20px;
}
.lh32 {
  line-height: 32px;
}
.lh48 {
  line-height: 48px;
}
.lh72 {
  line-height: 72px;
}
.bgLocation {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.mt4 {
  margin-top: 4px;
}
.mt10 {
  margin-top: 10px;
}
.mt12 {
  margin-top: 12px;
}
.mt20 {
  margin-top: 20px;
}
.mt22 {
  margin-top: 22px;
}
.mt32 {
  margin-top: 32px;
}
.mt30 {
  margin-top: 30px;
}
.mt34 {
  margin-top: 34px;
}
.mt40 {
  margin-top: 40px;
}
.mt44 {
  margin-top: 44px;
}
.mt50 {
  margin-top: 50px;
}
.mt80 {
  margin-top: 80px;
}
.mt120 {
  margin-top: 120px;
}
.mt140 {
  margin-top: 140px;
}
.mt120 {
  margin-top: 120px;
}
.mr10 {
  margin-right: 10px;
}
.mr5 {
  margin-right: 5px;
}
.mr20 {
  margin-right: 20px;
}
.mr25 {
  margin-right: 25px;
}
.mr30 {
  margin-right: 30px;
}
.mb2 {
  margin-bottom: 2px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb30 {
  margin-bottom: 30px;
}
.ml490 {
  margin-left: 490px;
}
.mb102 {
  margin-bottom: 102px;
}
.hidden {
  overflow: hidden;
}
.fw500 {
  font-weight: 500;
}
.ww430 {
  width: 430px;
}
.headerImg {
  height: 80px;
  width: 80px;
}
.headerImg1 {
  height: 60px;
  width: 60px;
}
.headerImg120 {
  height: 120px;
  width: 120px;
}
.qrcodeImg160 {
  width: 160px;
  height: 160px;
}
.qrcodeImg180 {
  width: 180px;
  height: 180px;
}
.qrcodeImg160 {
  width: 160px;
  height: 160px;
}
.qrcodeImg132 {
  width: 132px;
  height: 132px;
}
.qrcodeImg140 {
  width: 140px;
  height: 140px;
}
.qr-wrap {

}
.fs18 {
  font-size: 18px;
}
.fs20 {
  font-size: 20px;
}
.fs24 {
  font-size: 24px;
}
.fs28 {
  font-size: 28px;
}
.fs30 {
  font-size: 30px;
}
.fs32 {
  font-size: 32px;
}
.fs34 {
  font-size: 34px;
}
.fs42 {
  font-size: 42px;
}
canvas {
  z-index: 999;
  position: absolute;
  top: 0;
  left: 0;
}
.bg-2F3843 {
  background-color: #2f3843;
}
.line {
  width: 535px;
  height: 1px;
  background-color: #cccccc;
}
.l70 {
  left: 70px;
}
.b30 {
  bottom: 30px;
}
.b90 {
  bottom: 90px;
}
.b100 {
  bottom: 100px;
}
.b170 {
  bottom: 170px;
}
.l20 {
  left: 20px;
}
.l295 {
  left: 295px;
}
.r50 {
  right: 50px;
}
.customOne {
  padding-top: 60px;
  padding-left: 70px;
  padding-bottom: 100px;
}
.customThree {
  bottom: 100px;
  left: 50px;
}
.customThreeText {
  bottom: 0;
  left: 50px;
  padding-top: 130px;
  height: 260px;
}
.chunk {
  width: 110px;
  height: 12px;
  margin-top: 0;
  margin-left: 0;
  margin-bottom: 37px;
  background-color: #5ea6ef;
}
.check {
  top: calc(50% - 0.4rem);
  left: calc(50% - 0.4rem);
}
.box-shadow {
  box-shadow: 0 0 0 0 rgba(68, 145, 223, 0.3);
}
.masker {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10000000;
  background: #fff;
  opacity: 0.5;
}
.show-companyInfo {
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  height: 54px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}
.b4 {
  border: solid 4px rgba(255, 97, 50, 0.2);
}
.bd1-xmlred {
  border: 1px solid #FF300C;
}
.time-bg {
  background: url("../../../assets/i/wap/poster/time_bg.png") no-repeat;
  background-size: 100% 100%;
  width: 480px;
}
.qr-info {
  width: 100%;
  position: absolute;
  left: 0;
}
.mt226 {
  margin-top: 226px;
}
.c-fc-FF7662 {
  color: #FF7662;
}
.c-fc-3B2E79 {
  color: #3B2E79;
}
.hh394 {
  height: 394px;
}
.hh346 {
  height: 346px;
}
.p-b34 {
  bottom: 34px;
}
.p-b132 {
  bottom: 132px;
}
.p-b142 {
  bottom: 142px;
}
.p-b150 {
  bottom: 150px;
}
.mt90 {
  margin-top: 90px;
}
.mt194 {
  margin-top: 194px
}
.mt420 {
  margin-top: 420px;
}
.ph60 {
  padding-left: 60px;
  padding-right: 60px;
}
.rotate {
  transform: rotate(-2deg);
}
.rotate-13 {
  transform: rotate(13deg);
}
.pl12 {
  padding-left: 12px;
}
.pb20 {
  padding-bottom: 20px;
}
.pb25 {
  padding-bottom: 25px;
}
.pt12 {
  padding-top: 12px;
}
.pt25 {
  padding-top: 25px;
}
.pl30 {
  padding-left: 30px;
}
.pl100 {
  padding-left: 100px;
}
.pr12 {
  padding-right: 12px;
}
.pr20 {
  padding-right: 20px;
}
.pr28 {
  padding-right: 28px;
}
.mt194 {
  margin-top: 194px;
}
.p-t32 {
  top: 32px;
}
.p-t54 {
  top: 54px;
}
.p-t104 {
  top: 104px;
}
.p-t88 {
  top: 88px;
}
.p-t40 {
  top: 40px;
}
.br-r36 {
  border-top-right-radius: 36px;
  border-bottom-right-radius: 36px;
}
.br-l36 {
  border-top-left-radius: 36px;
  border-bottom-left-radius: 36px;
}
.p-b50 {
  bottom: 50px;
}
.bd-t-97 {
  border-top: 1px solid rgba(151, 151, 151, 0.2);
}
.br12 {
  border-radius: 12px;
}
.maxw240 {
  max-width: 280px;
}
.va-baseline {
  vertical-align: baseline;
}
.lh-13 {
  line-height: 1.3;
}
.top-10px {
  top: -5px;
}
.spread_text {
  background: rgba(204, 204, 204, .3);
}
</style>

